<template>
  <el-form :model="form" label-width="120px" style="width: 500px;">
    <el-form-item label="商品编号">
      <el-input v-model="id" />
    </el-form-item>
    <el-form-item label="数量">
      <el-input v-model="count" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button>清空</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive, toRefs } from 'vue'
import axios from 'axios'
export default {
  name: 'PurchaseOrder',
  setup () {
    const data = reactive({
      id: '',
      count: ''
    })
    const { id, count } = toRefs(data)
    const handleSubmit = async () => {
      const result = await axios.post('http://localhost:8080/api/purchase/save', {
        productId: id.value,
        count: count.value
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      console.log(result.data.data)
    }
    return {
      id,
      count,
      handleSubmit
    }
  }
}
</script>
